<template>
    <div>
        搜索结果
        <ul>
            <li v-for="song in searchResult" :key="song.id">
            <!-- {{文本插值}} -->
            <!-- html插值 -->
                <p v-html="highLight(song.name)"></p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:"Result",//组件名称.
        props:{
            keywords:{
                type:String,
                required:true
            }
        },
        data(){
            return {
                searchResult:[]
            }
        },
        created(){
            fetch(`http://47.115.51.185:8081/search?keywords=${this.keywords}`)
            .then(res=>res.json())
            .then(re=>{
                this.searchResult=re.result.songs;
                console.log("搜索结果==》",re);
            });
            console.log("搜索结果组件  created===>")
        },
        methods:{
            // 在你的身边  替换成 在<span style="color:red;font-weight:bold">你</span>的身边
            highLight(songname){//songname是字符串
                let reg=new RegExp(this.keywords);
                    songname=String(songname).replace(reg,
                    `<span style="color:red;font-weight:bold">${this.keywords}</span>`);
                return songname;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>